<template>
  <div class="earnings-info">
    <ts-header title="收益信息" back></ts-header>
    <div class="info-container">
      <div class="white common total-earnings">
        <label class="label-left">总收入</label>
        <span class="span-values">{{price_num || '0.00'}}</span>
      </div>
      <div class="white trans-flow">
        <div class="common tf-header">交易流水</div>
        <div v-if="orders.length>0" class="common tf-item" v-for="item in orders">
          <div class="label-info">
            <span class="item-date">{{item.pay_time | fmtCommonDate('yyyy-MM-dd')}}</span>
            <label class="item-label">{{['安装', '维修', '保养'][item.serve_type - 1]}}</label>
          </div>
          <div class="item-earnings">
            <span class="item-money">+{{item.price}}元</span>
          </div>
        </div>
      </div>
      <p class="no-data" v-if="orders.length===0">暂无数据</p>
    </div>
  </div>
</template>

<script>
  import {GET_EARNINGS} from '../../assets/js/api'

  export default {
    name: 'earningsInfo',
    data() {
      return {
        orders: [],
        price_num: 0.00
      }
    },
    async created() {
      const json = await this.$http.post(GET_EARNINGS, null, {show: true, type: 'mini'});
      if (json.result === 1) {
        this.orders = json.data.orders;
        this.price_num = json.data.price_num
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";

  .earnings-info {
    .info-container {
      color: #020202;
      .white {
        background-color: #FFFFFF;
      }
      .common {
        position: relative;
        @include borderScale('bottom');
      }
      .total-earnings {
        display: flex;
        padding: .22rem .23rem;
        font-size: .30rem;
        .label-left {
          flex: 1;
        }
        .span-values {
          text-align: right;
          flex: 1;
          color: #FAA12F;
        }
      }
      .trans-flow {
        margin-top: .20rem;
        .tf-header {
          padding: .25rem .23rem;
          font-size: .30rem;
        }
        .tf-item {
          display: flex;
          padding: .14rem .23rem;
          .label-info {
            flex: 1;
            .item-date {
              @include sc(.24rem, #909090);
              display: block;
            }
            .item-label {
              font-size: .24rem;
              margin-top: .08rem;
              display: block;
            }
          }
          .item-earnings {
            flex: 1;
            position: relative;
            .item-money {
              font-size: .24rem;
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .withdraws-cash {
        margin-top: 1.20rem;
        padding: 0 .35rem;
      }
    }
  }
</style>
